import React, { useState } from 'react';
import { Layout, Menu, Button } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';

const { Sider, Content } = Layout;

interface SubPageLayoutProps {
  children: React.ReactNode;
  menuItems?: MenuProps['items'];
  selectedKeys?: string[];
  onMenuClick?: (info: { key: string }) => void;
  defaultCollapsed?: boolean;
  siderWidth?: number;
  collapsedWidth?: number;
}

const SubPageLayout: React.FC<SubPageLayoutProps> = ({
  children,
  menuItems = [],
  selectedKeys = [],
  onMenuClick,
  defaultCollapsed = false,
  siderWidth = 240,
  collapsedWidth = 80,
}) => {
  const [collapsed, setCollapsed] = useState(defaultCollapsed);

  return (
    <Layout style={{ 
      minHeight: '100%', 
      background: '#f5f5f5'
    }}>
      {/* 左侧边栏 - 固定定位占满屏幕 */}
      {menuItems && menuItems.length > 0 && (
        <Sider
          collapsible
          collapsed={collapsed}
          onCollapse={setCollapsed}
          trigger={null}
          width={siderWidth}
          collapsedWidth={collapsedWidth}
          style={{
            background: '#fff',
            boxShadow: '2px 0 8px 0 rgba(29,35,41,.05)',
            position: 'fixed',
            left: 0,
            top: 0,
            bottom: 0,
            height: '100vh',
            zIndex: 100,
            overflow: 'hidden'
          }}
        >
          {/* 创建相对定位容器 */}
          <div style={{ 
            position: 'relative', 
            height: '100%', 
            display: 'flex', 
            flexDirection: 'column' 
          }}>
            {/* 侧边栏菜单 */}
            <div style={{ 
              flex: 1, 
              overflow: 'auto',
              paddingTop: '66px', // Header高度50px + 16px间距
              paddingBottom: '48px' // 为底部按钮留出空间
            }}>
              <Menu
                mode="inline"
                selectedKeys={selectedKeys}
                items={menuItems}
                onClick={onMenuClick}
                style={{
                  border: 'none',
                  background: 'transparent',
                  height: '100%'
                }}
                inlineCollapsed={collapsed}
              />
            </div>

            {/* 折叠按钮 - 固定在绝对底部 */}
            <div style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              right: 0,
              padding: '12px',
              display: 'flex',
              justifyContent: collapsed ? 'center' : 'flex-end'
            }}>
              <Button
                type="text"
                icon={collapsed ? <RightOutlined /> : <LeftOutlined />}
                onClick={() => setCollapsed(!collapsed)}
                size="small"
                style={{
                  fontSize: '12px',
                  width: 24,
                  height: 24,
                  borderRadius: '4px',
                  color: '#8c8c8c',
                  border: 'none',
                  background: 'transparent',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center'
                }}
              />
            </div>
          </div>
        </Sider>
      )}

      {/* 主内容区布局 */}
      <Layout style={{ 
        background: '#f5f5f5',
        minHeight: '100%',
        marginLeft: menuItems && menuItems.length > 0 ? (collapsed ? collapsedWidth : siderWidth) : 0,
        transition: 'margin-left 0.2s'
      }}>
        <Content style={{
          margin: '16px',
          background: '#fff',
          borderRadius: '8px',
          boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
          padding: '16px'
        }}>
          {children}
        </Content>
      </Layout>
    </Layout>
  );
};

export default SubPageLayout; 